<template>
  <j-modal
    title="详情"
    :width="1100"
    :visible="visible"
    switchFullscreen
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <div class="con-content">
      <a-row style="margin-bottom:10px;">
        <a-col :span="6">
          <span>模型名称：</span><span style="color:red;">{{ modelName }}</span>
        </a-col>
        <a-col :span="15">
          <span>情报更新时间：</span><span>{{ updateTime? updateTime:'--'}}</span>
        </a-col>
        <a-col>
          <a-button type="primary" v-if="status==1" @click="dispose('details')">处置结果</a-button>
          <a-button type="primary" v-else @click="dispose('add')">处置</a-button>
        </a-col>
      </a-row>
      <z-table
        ref="table"
        rowKey="key"
        bordered
        :showAlert="false"
        :columns="columns1"
        :dataSource="pageData1"
        :showSelection="false"
        :showPagination="true"
        @change="onTableChange1"
      />
      <a-tabs>
        <a-tab-pane key="1" tab="情报号码基本信息">
          <a-row style="margin-bottom:10px;">
            <a-col :span="12">
              <span>手机号码：</span><span>{{ baseInfo.intelligenceNumber }}（{{ baseInfo.numberLocation }})</span>
            </a-col>
            <a-col :span="6">
              <span>命中时间：</span><span style="color:red;">{{ baseInfo.createTime }}</span>
            </a-col>
          </a-row>
          <a-row style="margin-bottom:10px;">
            <a-col :span="24">
              <span>命中规则：</span>
              <span style="color:red;">{{baseInfo.hitRule}}</span>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="模型规则" force-render>
          <a-form-model ref="ruleForm2" v-if="modelId == '12'">
            <a-form-model-item>
            <div class="int">
              时间段在<a-time-picker v-model="config.startTime" class="input time" format="HH:mm" valueFormat="HH:mm" disabled />点至
              <a-time-picker v-model="config.endTime" class="input time" format="HH:mm" valueFormat="HH:mm" disabled />点，且近
              <a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input class="input" v-model="config.day" type="number" :precision="0" :min="0" :max="12" placeholder="输入天数" disabled />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>天内与社戒社康人员通联超过
              <a-input class="input" v-model="config.frequency" placeholder="请输入" disabled />次的人员
            </div>
          </a-form-model-item>
          </a-form-model>
          <a-form-model ref="ruleForm3" v-if="modelId == '13'">
            <a-form-model-item>
            <div class="int">
              时间范围在距今<a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input class="input" v-model="config.communicationDay" type="number" :precision="0" :min="0" :max="12" placeholder="输入天数" disabled />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>天内，社戒社康人员在任意
              <a-input class="input" v-model="config.minute" placeholder="请输入" disabled />分钟内与
              <a-input class="input" v-model="config.number" placeholder="请输入" disabled />个以上号码通联
            </div>
            <div class="int">
              时间范围在距今<a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input class="input" v-model="config.massSmsDay" type="number" :precision="0" :min="0" :max="12" placeholder="输入天数" disabled />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>天内，收到社戒社康人员的群发短信
            </div>
          </a-form-model-item>
          </a-form-model>
          <a-form-model ref="ruleForm4" v-if="modelId == '14'">
            <a-form-model-item>
            <div class="int">
              <a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input class="input" v-model="config.day" type="number" :precision="0" :min="0" :max="12" placeholder="输入天数" disabled />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>天内，每天在固定时间段
              <a-time-picker v-model="config.startTime" class="input time" format="HH:mm" valueFormat="HH:mm" disabled />点至
              <a-time-picker v-model="config.endTime" class="input time" format="HH:mm" valueFormat="HH:mm" disabled />点与社戒社康人员进行通联，超过
              <a-input class="input" v-model="config.exceedDay" placeholder="请输入" disabled />天的人员
            </div>
          </a-form-model-item>
          </a-form-model>
        </a-tab-pane>
      </a-tabs>
      <a-tabs>
        <a-tab-pane key="1" :tab="modelId == 13?'文本/通话详情':'通话详情'">
          <z-table
            ref="table"
            rowKey="key"
            bordered
            :showAlert="false"
            :columns="columns2"
            :dataSource="pageData2"
            :showSelection="false"
            :showPagination="true"
            :loading="loading2"
            @change="onTableChange2"
          />
        </a-tab-pane>
        <a-tab-pane key="2" tab="通联关系图" force-render v-if="modelId == 12">
          <chartYBar :data="relationData" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </j-modal>
</template>

<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'
import chartYBar from './chart-y-bar'
export default {
  name: 'intelligenceDetailsModal',
  components: { chartYBar },
  props: [],
  data() {
    return {
      visible: false,
      disableSubmit: true,
      pageData1: {},
      pageData2: {},
      // modelCheck: false,
      columns1: [
        { title: '序号', dataIndex: 'order', width: 200, align: 'center', 
          customRender: (text, record, index) => `${(this.pageData1.current - 1) * this.pageData1.size + (index + 1)}`
        },
        { title: '社戒社康人员', dataIndex: 'phone', align: 'left', width: 120, },
        { title: '姓名', dataIndex: 'name', align: 'center', },
        { title: '身份证号', dataIndex: 'idCard', align: 'center', },
        { title: '执行地区', dataIndex: 'implementationArea', align: 'center', }
      ],
      submitLoading: false,
      relationData: [],
      loading2: false,
      pageFilter2: {
        pageNo: 1,
        pageSize: 5
      },
      baseInfo: {},
      modelId: null,
      infoId: null,
      intelligenceNumber: null,
      modelName: null,
      status: null,
      updateTime: null,
      config: {}
    }
  },
  created() {},
  computed: {
    columns2() {
      let column1 = [
        {
          title: '序号',
          dataIndex: 'order',
          width: 120,
          align: 'center',
          customRender: (text, record, index) => `${(this.pageData2.current - 1) * this.pageData2.size + (index + 1)}` //序号分页后连续
        },
        { title: '对端社戒社康人员号码', dataIndex: 'phone', align: 'left' },
        { title: '社戒社康人员类型', dataIndex: 'phoneUserType', align: 'center',
          customRender:(text)=> {
            return <span style="color: #F59A23;"> {this.$filterDictTextByCache('sjsk_type', text)} </span>
          }
        },
        { title: '通联时间', dataIndex: 'contactTime', align: 'center'},
      ]
      let column2 = [
        {
          title: '序号',
          dataIndex: 'order',
          width: 120,
          align: 'center',
          customRender: (text, record, index) => `${(this.pageData2.current - 1) * this.pageData2.size + (index + 1)}` //序号分页后连续
        },
        { title: '对端社戒社康人员号码', dataIndex: 'phone', align: 'left' },
        { title: '社戒社康人员类型', dataIndex: 'phoneUserType', align: 'center',
          customRender:(text)=> {
            return <span style="color: #F59A23;"> {this.$filterDictTextByCache('sjsk_type', text)} </span>
          }
        },
        { title: '通联类型', dataIndex: 'communicationType', align: 'center',
          customRender:(text)=> text==1?'通话': text==2?'短信': ''
        },
        { title: '通联时间', dataIndex: 'contactTime', align: 'center',
          customRender: (text, record, index)=> {
            return <span>{record.contactTime.map(item=> {
              return <div style="">{item}</div>
            })}</span>
          }
        },
        { title: '异常状态', dataIndex: 'abnormalState', align: 'center',
          customRender:(text)=> {
            return <span style="color: #F59A23;">{text==1?'异常通联': text==2?'群发短信': ''}</span>
          }
        }
      ]
      return this.modelId==13? column2: column1
    }
  },
  methods: {
    show(record) {
      this.visible = true
      this.infoId = record.infoId
      this.intelligenceNumber = record.intelligenceNumber
      this.modelName = record.modelName
      this.status = record.status
      this.updateTime = record.updateTime
      this.getInformationRecordInfo()
      this.refreshTable1()
      this.refreshTable2()
    },
    refreshTable1() {
      this.loading1 = true
      let queryParam = Object.assign({}, {intelligenceNumber: this.intelligenceNumber, infoId: this.infoId}, this.pageFilter1)
      alarmServiceApi
        .getInformationRecord(queryParam)
        .then(res => {
          this.loading1 = false
          if (res.success) {
            this.pageData1 = res.result ? res.result : {}
            if(Object.keys(this.pageData1).length>0 && this.pageData1.records) {
              this.pageData1['records'].forEach((item,index) => item.key = index)
            }
          }
        })
        .catch(e => {
          this.loading1 = false
          this.$message.warn('请求失败！')
        })
    },
    refreshTable2() {
      this.loading2 = true
      let queryParam = Object.assign({}, {intelligenceNumber: this.intelligenceNumber, infoId: this.infoId}, this.pageFilter2)
      alarmServiceApi
        .getInformationCallInfo(queryParam)
        .then(res => {
          this.loading2 = false
          if (res.success) {
            this.pageData2 = res.result ? res.result : {}
            if(Object.keys(this.pageData2).length>0 && this.pageData1.records) {
              this.pageData2['records'].forEach((item,index) => item.key = index)
            }
          }
        })
        .catch(e => {
          this.loading2 = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange1(pagination, pageFilter, sorter) {
      this.pageFilter1 = Object.assign({}, this.pageFilter1, pagination)
      this.refreshTable1()
    },
    onTableChange2(pagination, pageFilter, sorter) {
      this.pageFilter2 = Object.assign({}, this.pageFilter2, pagination)
      this.refreshTable2()
    },
    getInformationRecordInfo() {
      let queryParam = Object.assign({}, {intelligenceNumber: this.intelligenceNumber, infoId: this.infoId})
      alarmServiceApi
        .getInformationRecordInfo(queryParam)
        .then(res => {
          if (res.success) {
            const { result } = res
            this.baseInfo = result ? result : {}
            this.modelId = Object.keys(this.baseInfo).length>0 && this.baseInfo.modelId? this.baseInfo.modelId: null
            this.getModelConfig()
            if(this.modelId==12) this.getInformationCallPicture()
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getInformationCallPicture() {
      let queryParam = Object.assign({}, {intelligenceNumber: this.intelligenceNumber, infoId: this.infoId})
      alarmServiceApi
        .getInformationCallPicture(queryParam)
        .then(res => {
          if (res.success) {
            const { result } = res
            let results = this.arrSort(result, 'count') //排序
            this.relationData = results ? results.map((item, index) => {
              if (index < 5) {
                //只取前五的数组值
                return {
                  product: item.phone,
                  count: item.count
                }
              }
            })
            .filter(obj => obj !== undefined) : []
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 获取配置详情
    getModelConfig() {
      alarmServiceApi.getModelConfig(this.modelId)
        .then(res => {
          if (res.success) {
            let result = res.result
            if (result && Object.keys(result).length > 0) {
              this.config = result.config
            }
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 处置、处置结果【调取列表的弹窗】
    dispose(type) {
      let obj = {
        modelName: this.baseInfo.modelName,
        infoId: this.infoId,
        createTime: this.baseInfo.createTime,
        intelligenceNumber: this.baseInfo.intelligenceNumber
      }
      this.$emit('dispose', obj, type)
    },
    /**
     * 自定义函数名：arrSort
     * @param arr： 被操作数
     * @param key： 需要用作排序的key名
     */
    arrSort(arr, key) {
      arr.sort(function(a, b) {
        return b[key] - a[key]
      })
      return arr
    },
    handleCancel() {
      this.visible = false
      this.$emit('close')
    },
    handleOk() {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.con-content {
  .con-content-top {
    width: 80%;
    margin: 10px auto 50px auto;
  }
  // padding-bottom: 50px;
}
.footerBox {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid #ccc;
}
.input {
  width: 90px;
  margin: 0 6px;
}
/deep/.ant-col-15 {
  width: 65%;
}
/deep/.ant-pagination-options-size-changer.ant-select {
  display: none;
}
</style>
